<template>
  <!--div形式的全部查询条件-->
  <el-drawer
    title="查询条件"
    :with-header="false"
    :before-close="moreClose"
    v-model="dialogInfo.isShow"
    direction="ttb"
    custom-class="demo-drawer"
    ref="drawer"
    size="400px"
  >
    <el-scrollbar style="height:350px;text-align: left;">
      <el-form
        inline
        label-position="right"
        :model="formModel"
        ref="formControl"
        class="demo-form-expand"
        label-suffix="："
        label-width="90px"
        size="mini"
      >
        <el-form-item
          v-for="(ctrId, index) in allFind"
          :key="'form_' + index + '_'+ ctrId"
          style="border:1px solid #cfe1f3;min-height:33px;"
          :style="{width: ( 180 * itemMeta[ctrId].colCount + 160 + 6 * (itemMeta[ctrId].colCount - 1) ) + 'px'}"
          :label="itemMeta[ctrId].label"
        >
          <!--查询的子控件，采用动态组件的方式 component-->
          <find-item-ctrl
            :model="findModel[ctrId]"
            :itemMeta="itemMeta[ctrId]"
          >
          </find-item-ctrl>
        </el-form-item>
        <el-form-item style="width:60px">
          <el-button type="primary" round>查询</el-button>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="moreClose">取 消</el-button>
        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<script>
  import { ref, onMounted, defineComponent } from 'vue'
  import { ElDrawer, ElScrollbar, ElButton, ElForm, ElFormItem } from 'element-plus'
  // 查询的子控件的容器
  import findItemCtrl from './item/_shell.vue'
// 查询子控件
import { findItem, findItemDict} from './item/_map-find-item'

export default defineComponent({
  name: 'el-find-more-div',
  components: {
    ElDrawer, ElScrollbar, ElButton, ElForm, ElFormItem,
    findItemCtrl,
    ...findItem
  },
  props: {
    allFind: Array,
    itemMeta: Object,
    findModel: Object,
    dialogInfo: Object // 是否打开抽屉
  },
  setup (props, context) {
    // console.log('查询控件 more == props', props)

    // 获取 $ref
    const formControl = ref(null)
    onMounted(() => {
      // console.log('表单dom', formControl)
    })

    const resetForm = () => {
      // 清空表单
      formControl.value.resetFields()
    }

    // 收起抽屉判断快捷是否为空
    const dialogInfo = props.dialogInfo
    const moreClose = () => {
      dialogInfo.isShow = false
    }

    return {
      findItemDict, // 查询子控件的字典

      resetForm, // 重置表单
      formControl, // 获取表单的dom
      moreClose // 收起抽屉，设置默认
    }
  }
})
</script>
